<template>
	<view class="page mine">
		<view class="header">
			<view v-if="userInfo.ID">
				<image :src="userInfo.avatar" mode="" class="face"></image>
			</view>
			<view v-else>
				<image src="../../static/icons/default-face.png" mode="" class="face"></image>
			</view>
			<view class="info_wrapper">
				<view v-if="userInfo.ID" class="info">
					<view class="nickname">
						{{userInfo.username}}
					</view>
					<view class="userid">
						ID：{{userInfo.ID}}
					</view>
				</view>
				<view v-else  @click="toRegisterLogin" class="nickname">
					注册/登录
				</view>
			</view>
			<view v-if="userInfo.ID" class="set_wrapper">
				<image @click="userSetting" src="../../static/icons/settings.png" mode="" class="setting_icon"></image>
			</view>
		</view>
		<view class="tips">
			超级英雄电影预告
		</view>
		<!-- 九宫格 -->
		<view class="main_nine_box">
			<view @click="handleItem(i)" v-for="(item,i) in projectData" :key="i" class="item_box">
				<image :src="item.icon" class="tag_icon"></image>
				<text class="tag_title">{{item.title}}</text>
			</view>
		</view>
		<registerLogin v-if="showRegisterLogin" @forCanel="toCanel"/>
		<userCenter v-if="showUserSetting" @forCanel="toCanel"/>
	</view>
</template>

<script>
	import registerLogin from '../../components/mine/registerLogin'
	import userCenter from '../../components/mine/userCenter.vue'
	export default {
		data() {
			return {
				showRegisterLogin:false, //显示登录注册组件
				userInfo:{}, //用户信息
				showUserSetting:false, //显示用户设置中心
				// 九宫格数据
				projectData: [
				  {
				    icon: "../../static/icons/108x108.png",
				    title: "项目简介",
				    content: `主要收集欧美地区的超级英雄电影的预告。项目使用uniapp作为主要框架结合Vue2.x进行开发，IDE使用HBuilderX，能够打包成H5、App、iOS、小程序不同类型的版本。为了方便演示，均使用本地数据。`,
				  },
				  {
				    icon: "../../static/icons/uniapp.png",
				    title: "uniapp",
				    content: `uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。`,
				  },
				  {
				    icon: "https://vuejs.org/images/logo.png",
				    title: "Vue",
				    content: `很方便很好用的前端框架，不必多说什么~~`,
				  },
				  {
				    icon: "../../static/icons/github.png",
				    title: "GitHub",
				    content: "没有上传到这里",
				  },
				  {
				    icon: "https://gitee.com/assets/favicon.ico",
				    title: "Gitee",
				    content: 'https://gitee.com/tilin/super_hero_preview',
				  },
				  {
				    icon: "../../static/icons/nandian.png",
				    title: "难点",
				    content: `①点赞动画：uni.createAnimation；②视频只能有一个播放：uni.createVideoContext，通过循环禁掉其它视频；③上拉加载（onPullDownRefresh，注意pages.json中开启enablePullDownRefresh）下拉刷新（onReachBottom）；④头像裁剪：官方代码修改（官方uniapp→pages→template→crop→crop.vue）；⑤微信登录：通过getUserInfo获取用户的code传给后端，后端使用code向小程序请求获得appid和appsecret；⑥转发给好友（button中的open-type=share、uni.share、onShareAppMessage-使用即可）、分享到朋友圈（onShareTimeline-使用即可）`,
				  },
				  {
				    icon: "../../static/icons/youhua.png",
				    title: "优化",
				    content: `①压缩图片或者把图片转化为网络地址；②涉及数据加载时加loadding；③搜索时的防抖设计；④App清理缓存（并非clearStorage）；⑤小程序的内存很可贵，打包成小程序的代码容量最好低于1M`,
				  },
				  {
				    icon: "../../static/icons/zhuyi.png",
				    title: "其它&注意",
				    content: `①自微信小程序开发者更新后，点赞动画无效；②清理缓存并非是clearStorage；③使用带有域名的数据时最好在小程序后台开发中心中加上request合法域名，当然域名是谁的都行；④头像裁剪在微信小程序中无效；⑤打包成App时注意配置appid、appkey等；⑥使用https://images.weserv.nl/?url=进行豆瓣图片“缓存”；⑦自己封装的uni.showToast调用时在微信小程序中无效`,
				  },
				  {
					  icon: "../../static/icons/over.png",
					  title: "完结",
					  content: `2021-2-11（完）`
				  }
				],
			}
		},
		created() {
			this.getUserInfo()
		},
		methods: {
			// 登录注册
			toRegisterLogin(){
				this.showRegisterLogin=true
			},
			// 取消登录注册
			toCanel(){
				this.showRegisterLogin=false
				this.showUserSetting=false
				this.getUserInfo()
			},
			// 获取缓存中的信息
			getUserInfo(){
				uni.getStorage({
					key:'userInfo',
					success:res=>{
						this.userInfo=res.data
					},
					fail:()=>{
						this.userInfo={}
					}
				})
			},
			// 用户设置中心
			userSetting(){
				this.showUserSetting=true
			},
			// 点击格子
			handleItem(i){
				uni.showModal({
					title:this.projectData[i].title,
					content:this.projectData[i].content,
					showCancel:false,
					confirmText:'关闭'
				})
			},
		},
		// 转发
		onShareAppMessage(){},
		// 分享到朋友圈
		onShareTimeline(){},
		components:{registerLogin,userCenter}
	}
</script>

<style lang="scss" scoped>
.mine{
	width: 100%;
	height: 100%;
	.header{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		/* #ifdef MP */ 
		padding: 0 30upx 40upx 30upx;
		/* #endif */
		/* #ifndef MP */
		padding: 120upx 30upx 40upx 30upx;
		/* #endif */
		background-color: #ffd655;
		background: url('http://qo1xme9v6.hn-bkt.clouddn.com/mine_bg.png') repeat;
		.face{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.info_wrapper{
			width: 70%;
			margin-left: 40upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.info{
				max-width: 70%;
			}
			.nickname{
				color: #6a5018;
				font-size: 18px;
				font-weight: 700;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.userid{
				color: #a38e62;
				font-size: 14px;
				width: 100%;
				margin-top: 10upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.set_wrapper{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			width: 15%;
			.setting_icon{
				width: 40upx;
				height: 40upx;
			}
		}
	}
	.tips{color: #dedede;font-size: 30px;text-align: center;padding: 40upx 0;letter-spacing: 10upx;text-shadow: 3upx 3upx 8upx #000;opacity: 0.32;}
	.main_nine_box{
		display: flex;
		flex-wrap: wrap;
		width: 80%;
		height: 80vw;
		margin: auto;
		padding: 0 30upx;
		.item_box{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: calc((100% - 10upx) / 3);
			height: calc((100% - 10upx) / 3);
			border: 1px solid #ccc;
			border-bottom: none;
			border-right: none;
			&:nth-child(3n){
				border-right: 1px solid #ccc;
			}
			&:nth-child(n+7){
				border-bottom: 1px solid #ccc;
			}
			.tag_title{
				color: #666;
				font-size: 14px;
				padding-top: 15upx;
			}
			.tag_icon{
				width: 60upx;
				height: 60upx;
			}
		}
	}
}
</style>
